<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.Date" %>
<%@ page info="This in index.jsp" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全部菜品</title>
		<link rel="stylesheet" href="../layui/css/layui.css" media="all">
		<script src="../js/jquery-3.4.1.js" charset="utf-8"></script>
		<script src="../layui/layui.js" charset="utf-8"></script>
		
		<!-- 加载菜品分类下拉框 -->
		<script>
			$(function(){
				$.ajax({
					url: "http://localhost/foodtype/findall",
					type: "POST",
					async: false,
					success: function(res){
						// debugger
						var data = $.parseJSON(res);
						// console.log(data);
						$("#type").empty();
						let types = data.data;
						// console.log(types);
		                $("#type").append("<option value=''>请选择分类</option>");
						// console.log(typeof(types));
						// console.log(types);
						var len = types.length;
						// console.log(len);
						for(var i = 0;i < len; i++){
							$("#type").append("<option value='"+types[i].id+"'>"+types[i].typename+"</option>");
						}
					}
				});
			});
		</script>
		
	</head>
	<body>
		<!-- 表格数据 -->
		<table class="layui-hide" id="test" lay-filter="test"></table>
		<!-- 填写表单 -->
		<form class="layui-form" id="addform" style="display:none">
			<div class="layui-form-item">
				<label class="layui-form-label">菜品名称</label>
				<div class="layui-input-block">
					<input type="text" name="foodname" required lay-verify="required" placeholder="请输入菜品名称"
						autocomplete="on" class="layui-input" id="foodname" style="width:300px" required  lay-verify="required">
				</div>
			</div>
			
			<div class="layui-form-item layui-form-text">
			    <label class="layui-form-label">菜品特色</label>
			    <div class="layui-input-block">
			      <textarea name="feature" placeholder="请输入菜品特色" class="layui-textarea" style="width: 300px;"
				  required  lay-verify="required" id="feature"></textarea>
			    </div>
			  </div>
			  
			  <div class="layui-form-item layui-form-text">
			      <label class="layui-form-label">所需食材</label>
			      <div class="layui-input-block">
			        <textarea name="material" placeholder="请输入所需食材" class="layui-textarea" style="width: 300px;"
			  	  required  lay-verify="required" id="material"></textarea>
			      </div>
			    </div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">菜品价格(元)</label>
					<div class="layui-input-block">
						<input type="number" name="price" required lay-verify="required" placeholder="请输入菜品价格"
							autocomplete="on" class="layui-input" id="price" style="width:300px" required  lay-verify="required">
					</div>
				</div>	
				
				
				
				<div class="layui-form-item">
					<label class="layui-form-label">菜品类型</label>
					<div class="layui-input-block">
						<select name="type" lay-search style="width:300px" required  id="type">
						  
						  
						</select>
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">菜品备注</label>
					<div class="layui-input-block">
						<select name="comment" lay-search style="width:300px" required id="comment">
						  <option value="">请选择备注</option>
						  <option value="-1">正常菜</option>
						  <option value="0">厨师推荐</option>
						</select>
					</div>
				</div>
				
				
				<div class="layui-form-item">
					<label class="layui-form-label">上传封面</label>
					<div class="layui-upload-drag" id="test10">
					  <i class="layui-icon"></i>
					  <p>点击上传，或将文件拖拽到此处</p>
					  <div class="layui-hide" id="uploadDemoView">
					    <hr>
					    <img src="" alt="上传成功后渲染" style="max-width: 196px">
					  </div>
					</div>
				</div>
				
				<div class="layui-form-item">
					<!-- <label class="layui-form-label">菜品图片url</label> -->
					<div class="layui-input-block">
						<input type="hidden" name="picture" required lay-verify="required" placeholder="图片隐藏"
							autocomplete="on" class="layui-input" id="picture" style="width:300px"
							hidden="hidden">
					</div>
				</div>

		</form>

		<script type="text/html" id="toolbarDemo">
			<div class="layui-btn-container">
				<button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
				<!-- <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
						<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
						<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button> -->
			</div>
		</script>

		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="online">上架</a>
			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="unline">下架</a>
		</script>


		
		
		
		
		
		<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
			<!-- <%--展示图片--%> -->
		<script type="text/html" id="pictemp">
			<img src="{{d.picture}}" height="200px" width="108px" onclick="show_img(this)" />
		</script>
		
			<!-- 文件上传 -->
		  <script>
				layui.use(['upload', 'element', 'layer'], function(){
				  var $ = layui.jquery
				  ,upload = layui.upload
				  ,element = layui.element
				  ,layer = layui.layer;
				  
				  
				  //拖拽上传
				    upload.render({
				      elem: '#test10'
				      ,url: 'http://localhost/file/save' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
				      ,done: function(res){
				        // layer.msg('上传成功');
				        layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.msg);
						$("#picture").val(res.msg);
				        // console.log(res.msg);
				      }
				    });
				  
				});
		  </script>
		
		
		 <!-- 点击放大展示图片 -->
		<script>
			function show_img(t) {
				// console.log(t);
				// var t = $(t).find("img");
				// console.log(t);
				//页面层
				layer.open({
					type: 1,
					title: '区域图片',
					skin: 'layui-layer-rim', //加上边框
					area: ['80%', '80%'], //宽高 t.width() t.height()
					shadeClose: true, //开启遮罩关闭
					end: function (index, layero) {
						return false;
					},
					content: '<div style="text-align:center"><img src="' + $(t).attr('src') + '" /></div>'
				});
			}
		</script>

		<script>
			layui.use(['table','form'], function() {
				var table = layui.table;
				var form = layui.form;
				table.render({
					elem: '#test',
					url: 'http://localhost/food/pagelist',
					toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
						,
					// defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
					// 	title: '提示',
					// 	layEvent: 'LAYTABLE_TIPS',
					// 	icon: 'layui-icon-tips'
					// }],
					width: 1300,
					height: 540,
					title: '全部菜品',
					cols: [
						[{
							type: 'checkbox',
							fixed: 'left'
						}, {
							field: 'id',
							title: 'ID',
							width: 80,
							fixed: 'left',
							unresize: true,
							sort: true,
							style: "height:60px"
						}, {
							field: 'typename',
							title: '菜品类型',
							width: 100,

						}, {
							field: 'foodname',
							title: '菜品名称',
							width: 120,

						},
						{
							field: 'feature',
							title: '特色',
							width: 200,
						
						},
						{
							field: 'material',
							title: '食材',
							width: 300,
						
						},
						{
							field: 'price',
							title: '价格(元)',
							width: 100,
							templet: function(d){
								return ""+d.price+".00￥";
							}
						},
						{
							field: 'picture',
							title: '封面',
							width: 130,
							templet: "#pictemp"
						},
						{
							field: 'hits',
							title: '人气值',
							width: 100,
						
						},
						{
							field: 'comment',
							title: '备注',
							width: 100,
							templet: function(d){
								if(d.comment == 0){
									return "<span style='color: green'>厨师推荐</span>"
								}else{
									return "<span style='color: skyblue'>正常菜</span>"
								}
							}
						},
						{
							field: 'flag',
							title: '标识',
							width: 100,
							templet: function(d){
								if(d.flag == 1){
									return "<span style='color:  #00e600'>上架状态</span>"
								}else{
									return "<span style='color: red'>下架状态</span>"
								}
							}
						},
						
						{
							style: "height:60px",
							fixed: 'right',
							title: '操作',
							toolbar: '#barDemo',
							width: 180
						}]
					],
					initSort: {
						field: 'id' //排序字段，对应 cols 设定的各字段名
							,
						type: 'asc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
					},
					page: true
				});

				//头工具栏事件
				table.on('toolbar(test)', function(obj) {
					var checkStatus = table.checkStatus(obj.config.id);
					switch (obj.event) {
					
						case 'add':
							layer.open({
								type: 1,
								area: ['500px', '600px'],
								offset: ['10px', '400px'],
								title: '添加数据',
								content: $("#addform"),
								shade: 0,
								btn: ['提交', '重置'],
								zIndex: 9999999,
								moveOut: true,
								success: function(){
									// $.ajax({
									// 	url: "http://localhost/foodtype/findall",
									// 	type: "POST",
									// 	success: function(res){
									// 		debugger
									// 		var data = $.parseJSON(res);
									// 		// console.log(data);
									// 		$("#type").empty();
									// 		let types = data.data;
									// 		// console.log(types);
									//         $("#type").append("<option value=''>请选择分类</option>");
									// 		console.log(typeof(types));
									// 		console.log(types);
									// 		for(var i = 0;i < types.length; i++){
									// 			$("#type").append("<option value='"+types[i].id+"'>"+types[i].typename+"</option>");
									// 		}
									// 	}
									// });
								},
								btn1: function(index, layero) {
									// 拼接参数
									var foodname = $("#foodname").val();
									var feature = $("#feature").val();
									var material = $("#material").val();
									var price = $("#price").val();
									var type = $("#type").val();
									var typename = $("#type").find("option:selected").text();
									var comment = $("#comment").val();
									var picture = $("#picture").val();
									var data = {
										foodname: foodname,
										feature: feature,
										material: material,
										price: price,
										type: type,
										typename: typename,
										comment: comment,
										picture: picture
									}
									// console.log(data);
									// 判断对象中是否有一项为空，有就不提交
									let flag = true;
									 
									  for(var key in data){
									    if(data[key] != '0' && !data[key]){
											flag = false;
									    }
									  }
									// console.log(flag);
									
									if (flag) {
										$.ajax({
											//请求方式
											type: "POST",
											//请求的媒体类型
											// contentType: "application/json;charset=UTF-8",
											//请求地址
											url: "http://localhost/food/add",
											//数据，json字符串
											data: data,
											// data : JSON.stringify(list),
											//请求成功
											success: function(result) {
												// 获取当前页码
												let currpage = $('.layui-laypage-em')
													.next().text();
												var data = $.parseJSON(result);
												if (data.code == 0) {
													$("#addform")[0].reset();
													table.reload("test", {
														page: {
															curr: currpage
														}
													});
													layer.closeAll();
												} else {
													layer.msg(data.msg);
													layer.closeAll();
												}
											}
										});
									} else {
										layer.msg("你填空的，玩个锤子!!!");
										return;
									}
								},
								btn2: function(index, layero) {
									// 先清空图片，再清空表单其他数据
									layui.$('#uploadDemoView').addClass('layui-hide').find('img').attr('src', "");
									$("#type").find("option:selected").removeAttr("selected");
									$("#comment").find("option:selected").removeAttr("selected");
									$("#addform")[0].reset();
									return false;
								},
								cancel: function(layero, index) {
									layer.closeAll();
									// 先清空图片，再清空表单其他数据
									layui.$('#uploadDemoView').addClass('layui-hide').find('img').attr('src', "");
									$("#type").find("option:selected").removeAttr("selected");
									$("#comment").find("option:selected").removeAttr("selected");
									$("#addform")[0].reset();
								}
							});

							break;
					};
				});

				//监听行工具事件
				table.on('tool(test)', function(obj) {
					var data = obj.data;
					//console.log(obj)
					if (obj.event === 'unline') {
						layer.confirm('真的下架行么', function(index) {
							// console.log(data);
							// console.log(index);
							if(data.flag == 0){
								layer.msg("该菜品已经是下架状态！！！");
								return;
							}
							$.ajax({
								//请求方式
								type: "POST",
								//请求的媒体类型
								// contentType: "application/json;charset=UTF-8",
								//请求地址
								url: "http://localhost/food/delete",
								//数据，json字符串
								data: data,
								// data : JSON.stringify(list),
								//请求成功
								success: function(result) {
									// 获取当前页码
									let currpage = $('.layui-laypage-em')
										.next().text();
									var data = $.parseJSON(result);
									if (data.code == 0) {
										table.reload("test", {
											page: {
												curr: currpage
											}
										});
										layer.close(index);
									} else {
										layer.msg(data.msg);
										layer.close(index);
									}

								}
							});
							// layer.close(index);
						});
					} else if (obj.event === 'edit') {
						layer.open({
							type: 1,
							// area: ['500px', '600px'],
							offset: ['10px', '400px'],
							title: '修改数据',
							content: $("#addform"),
							shade: 0,
							btn: ['修改'],
							zIndex: 9999999,
							moveOut: true,
							// 弹出成功回调
							success: function(layero, index) {
								// console.log(layero);
								// console.log(index);
								// $("#typename").val(data.typename);
								// console.log(data);
								$("#foodname").val(data.foodname);
								$('#foodname').attr('disabled', 'disabled');
								$('#foodname').attr('style', 'background:#CCCCCC');
								$("#feature").val(data.feature);
								$("#material").val(data.material);
								$("#price").val(data.price);
								// $("#type").val(data.type);
								// $("#comment").val(data.comment);
								$("#picture").val(data.picture);
								layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', data.picture);
								
								// 默认选中type属性
								var types = $("#type").find("option"); //获取select下拉框的所有值
								for (var j = 1; j < types.length; j++) {
									// console.log(data.type);
									// console.log($(types[j]).val());
									if ($(types[j]).val() == data.type) {
										$(types[j]).attr("selected",true);
									}
								}
								// 默认选中comment属性
								var comments = $("#comment").find("option"); //获取select下拉框的所有值
								for (var j = 1; j < comments.length; j++) {
								if ($(comments[j]).val() == data.comment) {
										$(comments[j]).attr("selected",true);
									}
								}
								// 重点，下拉框默认值之后，需要表单重新渲染
								form.render('select');
											
							},
							btn1: function(index, layero) {
								// 拼接参数
								var foodname = $("#foodname").val();
								var feature = $("#feature").val();
								var material = $("#material").val();
								var price = $("#price").val();
								var type = $("#type").val();
								var typename = $("#type").find("option:selected").text();
								var comment = $("#comment").val();
								var picture = $("#picture").val();
								var reqdata = {
									id: data.id,
									foodname: foodname,
									feature: feature,
									material: material,
									price: price,
									type: type,
									typename: typename,
									comment: comment,
									picture: picture,
								}
								// console.log(reqdata);
								// 判断对象中是否有一项为空，有就不提交
								let flag = true;
								 
								  for(var key in reqdata){
								    if(reqdata[key] != '0' && !reqdata[key]){
										flag = false;
								    }
								  }
								// console.log(flag);
								
								if (flag) {
									$.ajax({
										//请求方式
										type: "POST",
										//请求的媒体类型
										// contentType: "application/json;charset=UTF-8",
										//请求地址
										url: "http://localhost/food/update",
										//数据，json字符串
										data: reqdata,
										// data : JSON.stringify(list),
										//请求成功
										success: function(result) {
											// 获取当前页码
											let currpage = $('.layui-laypage-em')
												.next().text();
											var data = $.parseJSON(result);
											if (data.code == 0) {
												$("#addform")[0].reset();
												table.reload("test", {
													page: {
														curr: currpage
													}
												});
												layer.closeAll();
											} else {
												layer.msg(data.msg);
												layer.closeAll();
											}
										}
									});
								} else {
									layer.msg("你填空的，玩个锤子!!!");
									return;
								}
							},
							cancel: function(layero, index) {
								layer.closeAll();
								$("#type").find("option:selected").removeAttr("selected");
								$("#comment").find("option:selected").removeAttr("selected");
								layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', "");
								$("#addform")[0].reset();
							}

						});
					}else if(obj.event === 'online'){
						layer.confirm('真的上架行么', function(index) {
							// console.log(data);
							// console.log(index);
							if(data.flag == 1){
								layer.msg("该菜品已经是上架状态！！！");
								return;
							}
							$.ajax({
								//请求方式
								type: "POST",
								//请求的媒体类型
								// contentType: "application/json;charset=UTF-8",
								//请求地址
								url: "http://localhost/food/online",
								//数据，json字符串
								data: data,
								// data : JSON.stringify(list),
								//请求成功
								success: function(result) {
									// 获取当前页码
									let currpage = $('.layui-laypage-em')
										.next().text();
									var data = $.parseJSON(result);
									if (data.code == 0) {
										table.reload("test", {
											page: {
												curr: currpage
											}
										});
										layer.close(index);
									} else {
										layer.msg(data.msg);
										layer.close(index);
									}
						
								}
							});
							// layer.close(index);
						});
					}
				});
			});
		</script>

	</body>
</html>

